@import '~scss/variables';
@import '~scss/mixins';

:global {
  @for $i from 1 through 10 {
    @for $j from 1 through 10 {
      $maxWidth: $j * 5vw;
      .table-#{$i}-#{$j} {
        &.table table {
          & tr > td:nth-of-type(#{$i}) {
            & > :first-child {
              max-width: $maxWidth;
            }
            & > span:first-child {
              max-width: $maxWidth;
              display: inline-block;
            }
          }
        }
      }
    }
  }
}

.table {
  border-radius: $border-radius;
  box-shadow: $base-shadow;
  background-color: $white;
  overflow: hidden;

  :global {
    .table-body {
      padding: 0 12px 12px;
    }
    .table-footer {
      padding: 8px 20px;
    }
  }

  table {
    a {
      color: #242e42;
    }

    & > thead > tr > th {
      a {
        color: #79879c;
        &:hover {
          color: #79879c;
        }
      }
    }
  }
}

.button {
  min-width: 96px;
}

.cancelSelect {
  color: #fff;
  &:hover {
    background-color: $dark-color06;
  }
  &:active {
    background-color: $dark-color05;
  }
}

.create {
  min-width: 96px;
  margin-left: 12px;
}

.disableSearch {
  pointer-events: none !important;
  input {
    pointer-events: none !important;
  }
  user-select: none;
  opacity: 0.6;
}

.search {
  width: 100%;
  margin-right: 12px;
}

.emptyText {
  & > div {
    @include TypographyTitleH5();
  }

  & > p {
    margin-top: 4px;
    @include TypographyParagraph($dark-color01);
  }

  @at-root {
    .emptyTipIcon {
      width: 60px;
      height: 60px;
      border-radius: 50% 0 50% 50%;
      background: $light-color02;
      display: inline-block;
      line-height: 50px;
      margin-bottom: 20px;
    }
  }
}

.action {
  color: $blue-color03;
  padding: 0 4px;
  cursor: pointer;
  font-weight: $font-bold;
}

.columnMenu {
  width: 160px;
}
